<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>import & require</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background: linear-gradient(to bottom, #0d1b2a, #1b263b);
        color: #e0e1dd;
        min-height: 100vh;
        padding: 20px;
      }

      .container {
        max-width: 1000px;
        margin: 0 auto;
      }

      header {
        text-align: center;
        padding: 30px 0;
      }

      h1 {
        color: #4ea8de;
        font-size: 2.5rem;
        margin-bottom: 10px;
      }

      .search-box {
        max-width: 500px;
        margin: 20px auto;
        display: flex;
      }

      .search-input {
        flex: 1;
        padding: 12px 15px;
        border: 2px solid #415a77;
        border-radius: 5px 0 0 5px;
        background: #1b263b;
        color: white;
        outline: none;
      }

      .search-btn {
        padding: 12px 20px;
        background: #4ea8de;
        color: white;
        border: none;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
      }

      .nav-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin: 20px 0 30px;
      }

      .nav-item {
        padding: 10px 20px;
        background: #415a77;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        transition: background 0.3s;
      }

      .nav-item:hover {
        background: #4ea8de;
      }

      .code-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
      }

      .code-card {
        background: #415a77;
        border-radius: 8px;
        padding: 20px;
        transition: transform 0.3s;
      }

      .code-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .code-card h3 {
        color: #4ea8de;
        margin-bottom: 10px;
      }

      .code-card p {
        color: #e0e1dd;
        margin-bottom: 15px;
        font-size: 0.9rem;
      }

      .code-link {
        display: inline-block;
        padding: 8px 15px;
        background: #4ea8de;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-size: 0.9rem;
      }

      footer {
        text-align: center;
        margin-top: 40px;
        padding: 20px;
        color: #778da9;
      }

      @media (max-width: 768px) {
        .code-grid {
          grid-template-columns: 1fr;
        }

        h1 {
          font-size: 2rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>import & require知识汇总</h1>
        <!-- <p>快速查找代码示例</p> -->

        <!-- <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索...">
                <button class="search-btn"><i class="fas fa-search"></i></button>
            </div> -->
      </header>

      <div class="nav-menu">
        <a href="./BaseGrammar.html" class="nav-item" target="_blank"
          >import基础语法</a
        >
        <a href="./ExecuteNoImport.html" class="nav-item" target="_blank"
          >import仅执行模块</a
        >
        <a href="./DynamicImport.html" class="nav-item" target="_blank"
          >import动态引入</a
        >
      </div>

      <!-- <div class="code-grid">
            <div class="code-card">
                <h3>import基础语法</h3>
                <p>使用HTML和CSS创建自适应导航菜单，支持移动设备。</p>
                <a href="#" class="code-link">查看代码</a>
            </div>
            
            <div class="code-card">
                <h3>表单验证</h3>
                <p>JavaScript实现的前端表单验证示例，包含常见验证规则。</p>
                <a href="#" class="code-link">查看代码</a>
            </div>
            
            <div class="code-card">
                <h3>API请求</h3>
                <p>使用Fetch API进行HTTP请求的现代JavaScript示例。</p>
                <a href="#" class="code-link">查看代码</a>
            </div>
            
            <div class="code-card">
                <h3>登录界面</h3>
                <p>简洁美观的登录页面设计，包含CSS动画效果。</p>
                <a href="#" class="code-link">查看代码</a>
            </div>
            
            <div class="code-card">
                <h3>数据过滤</h3>
                <p>JavaScript实现的数据搜索和过滤功能示例。</p>
                <a href="#" class="code-link">查看代码</a>
            </div>
            
            <div class="code-card">
                <h3>模态框</h3>
                <p>纯CSS实现的模态弹窗，无需JavaScript。</p>
                <a href="#" class="code-link">查看代码</a>
            </div>
        </div> -->
    </div>

    <!-- <script>
        // 简单的搜索功能
        document.querySelector('.search-btn').addEventListener('click', function() {
            const searchTerm = document.querySelector('.search-input').value;
            if (searchTerm.trim() !== '') {
                alert('搜索: ' + searchTerm);
                // 实际应用中这里可以执行搜索操作
            }
        });
        
        // 回车键搜索
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-btn').click();
            }
        });
    </script> -->
  </body>
</html>
